<template>
  <el-dialog v-model="dialogFormVisible" title="修改商品类别信息">
    <el-form :model="categoryForm" :rules="rules" ref="ruleFormRef">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="商品类别ID"
            :label-width="formLabelWidth"
            prop="category_id"
          >
            <el-input
              v-model="categoryForm.category_id"
              autocomplete="off"
              size="large"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="商品类别名称"
            :label-width="formLabelWidth"
            prop="category_name"
          >
            <el-input
              v-model="categoryForm.category_name"
              autocomplete="off"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="类别"
            :label-width="formLabelWidth"
            prop="isFather"
          >
            <el-select disabled v-model="categoryForm.isFather" size="large">
              <el-option label="一级类别" value="1" />
              <el-option label="二级类别" value="2" />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="父级类别" :label-width="formLabelWidth">
            <el-select
              v-model="categoryForm.category_father"
              size="large"
              :disabled="categoryForm.isFather === '1'"
              placeholder="无"
            >
              <el-option
                v-for="onetype in oneTypeList"
                :key="onetype.category_oneId"
                :label="onetype.category_oneName"
                :value="onetype.category_oneId"
              />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, defineExpose, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import { reqUpdateOneType, reqUpdateTwoType } from '@/api/goods'
import { ElMessage } from 'element-plus'
const dialogFormVisible = ref(false)
const ruleFormRef = ref()
const formLabelWidth = '140px'
const data = reactive({
  categoryForm: {
    category_id: null,
    category_name: null,
    isFather: null,
    category_father: null
  },
  rules: {
    category_id: [
      { required: true, message: '商品类别ID不能为空', trigger: 'blur' }
    ],
    category_name: [
      { required: true, message: '商品类别名称不能为空', trigger: 'blur' }
    ],
    isFather: [{ required: true, message: '级别不能为空', trigger: 'blur' }]
  }
})
const { categoryForm, rules } = data
const store = useStore()
const { getters } = store
// 确定按钮
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let result
      if (categoryForm.isFather === '1') {
        result = await reqUpdateOneType({
          category_oneId: data.categoryForm.category_id,
          category_oneName: data.categoryForm.category_name
        })
      } else {
        result = await reqUpdateTwoType({
          category_twoId: data.categoryForm.category_id,
          category_twoName: data.categoryForm.category_name,
          category_oneId: data.categoryForm.category_father
        })
      }
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
    } else {
      return false
    }
  })
}
// 显示与隐藏的方法
const changeDialogFormVisible = () => {
  dialogFormVisible.value = !dialogFormVisible.value
}
const category = computed(() => getters.category)
const oneTypeList = computed(() => getters.oneTypeList)
// const isFather = computed(() => (category.value.category_father ? '2' : '1'))
watch(category, (newValue, oldValue) => {
  if (newValue !== undefined) {
    for (const key in newValue) {
      data.categoryForm[key] = newValue[key]
    }
    data.categoryForm.isFather = category.value.category_father ? '2' : '1'
    if (data.categoryForm.isFather === '2') {
      data.categoryForm.category_father =
        newValue.category_father.category_oneId
    }
  }
})
defineExpose({
  changeDialogFormVisible
})
</script>

<style lang="scss" scoped></style>
